<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>新闻发布系统</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .navbar {
            background-color: #0d6efd;  /* 导航栏蓝色背景 */
        }
        .form-container {
            max-width: 800px;
            margin: 2rem auto;
            padding: 2rem;
            box-shadow: 0 0 15px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">新闻系统</a>
            <div class="collapse navbar-collapse">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/root_home.html">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/add_class.html">添加分类</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="/release_news.html">发布新闻</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 新闻发布表单 -->
    <div class="container">
        <div class="form-container">
            <h2 class="mb-4">发布新闻</h2>
            <form id="newsForm">
                <!-- 标题输入 -->
                <div class="mb-3">
                    <label for="title" class="form-label">新闻标题</label>
                    <input type="text" class="form-control" id="title" required>
                </div>

                <!-- 作者输入 -->
                <div class="mb-3">
                    <label for="publisher" class="form-label">作者</label>
                    <input type="text" class="form-control" id="publisher" required>
                </div>

                <!-- 分类选择 -->
                <div class="mb-3">
                    <label for="category" class="form-label">新闻分类</label>
                    <select class="form-select" id="category" required>
                        <option value="" disabled selected>加载分类中...</option>
                    </select>
                </div>

                <!-- 内容编辑 -->
                <div class="mb-4">
                    <label for="content" class="form-label">新闻内容</label>
                    <textarea class="form-control" id="content" rows="8" required></textarea>
                </div>

                <!-- 提交按钮 -->
                <button type="submit" class="btn btn-primary w-100 py-2">
                    <span class="spinner-border spinner-border-sm d-none" role="status"></span>
                    立即发布
                </button>
            </form>
        </div>
    </div>

    <!-- Bootstrap JS & 自定义脚本 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    <script>
        // 页面加载完成后执行
        window.addEventListener('DOMContentLoaded', async () => {
            // 获取分类数据
            try {
                const response = await fetch('/get_class')
                if (!response.ok) throw new Error('分类获取失败')
                const { class: categories } = await response.json()
                
                // 填充分类选项
                const categorySelect = document.getElementById('category')
                categorySelect.innerHTML = categories.map(cat => 
                    `<option value="${cat}">${cat}</option>`
                ).join('')
            } catch (error) {
                categorySelect.innerHTML = '<option>分类加载失败</option>'
                console.error(error)
            }
        })

        // 表单提交处理（修改了成功后的跳转逻辑）
        document.getElementById('newsForm').addEventListener('submit', async (e) => {
            e.preventDefault()
            
            // 获取表单元素
            const btn = e.target.querySelector('button')
            const spinner = btn.querySelector('.spinner-border')
            const formData = {
                title: document.getElementById('title').value,
                publisher: document.getElementById('publisher').value,
                class: document.getElementById('category').value,
                body: document.getElementById('content').value
            }

            try {
                // 显示加载状态
                btn.disabled = true
                spinner.classList.remove('d-none')

                // 提交数据
                const response = await fetch('/release_news', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(formData)
                })

                if (!response.ok) throw new Error('发布失败')
                
                // 发布成功后跳转到首页（新增的跳转逻辑）
                window.location.href = '/root_home.html'

            } catch (error) {
                alert(error.message || '发布请求失败')
            } finally {
                btn.disabled = false
                spinner.classList.add('d-none')
            }
        })
    </script>
</body>
</html>